<template>
    <view class="zc">
        <view>
            <!-- 个人资料完善 -->
            <!-- 415466564645645456464564564564asjdklajklsjdkljxcbjkbaj -->
            <span>头像：</span>
            <img style="width: 120px;height: 120px;position: absolute;left: 12px;top: 21px;"
                src='https://img0.baidu.com/it/u=1730797731,3698918328&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' alt="">

            <span><uni-file-picker limit="1" @select="select"></uni-file-picker></span>
        </view>




        <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
            <uni-forms-item label="用户名" required name="username">
                <uni-easyinput v-model="valiFormData.username" placeholder="请输入用户名" />
            </uni-forms-item>
            <uni-forms-item label="昵称" required name="nickname">
                <uni-easyinput v-model="valiFormData.nickname" placeholder="请输入昵称" />
            </uni-forms-item>
            <uni-forms-item label="性别" required name="sex">
                <uni-data-checkbox v-model="valiFormData.sex" :localdata="sexs" />
            </uni-forms-item>
            <uni-forms-item label="qq邮箱" required name="email">
                <uni-easyinput v-model="valiFormData.email" placeholder="请输入qq邮箱" />
            </uni-forms-item>
            <uni-forms-item label="所以在大学" required name="school">
                <uni-data-picker class="niu" :localdata="items" popup-title="请选择大学" @change="onchange"></uni-data-picker>
            </uni-forms-item>
            <uni-forms-item label="地址" required name="address">
                <uni-easyinput v-model="valiFormData.address" placeholder="请输入地址" />
            </uni-forms-item>
        </uni-forms>
        <button type="primary" style="background-color: orange;" @click="submit('valiForm')">完成</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            imgge: wx.getStorageSync('user').avater,
            img2: '',
            imageValue: [],
            // 单选数据源
            sexs: [{
                text: '男',
                value: '男'
            }, {
                text: '女',
                value: '女'
            }, {
                text: '保密',
                value: '保密'
            }],
            items: [{
                text: "河北省",
                value: "河北省",
                children: [
                    {
                        text: "保定市",
                        value: "保定市",
                        children: [
                            {
                                text: "保定理工学院",
                                value: "保定理工学院"
                            }
                        ]
                    }
                ]
            }],
            // 校验表单数据
            valiFormData: {
                username: '',
                nickname: "",
                sex: '',
                email: '',
                school: "",
                address: ''

            },
            // 校验规则
            rules: {
                username: {
                    rules: [{
                        required: true,
                        errorMessage: '姓名不能为空'
                    }]
                },
                nickname: {
                    rules: [{
                        required: true,
                        errorMessage: '姓名不能为空'
                    }]
                },
                email: {
                    rules: [{
                        required: true,
                        errorMessage: '邮箱不能为空'
                    }]
                },
                address: {
                    rules: [{
                        required: true,
                        errorMessage: '地址不能为空'
                    }]
                }
            },

        }
    },
    computed: {
        // 处理表单排列切换
        alignment() {
            if (this.current === 0) return 'left'
            if (this.current === 1) return 'top'
            return 'left'
        }
    },

    methods: {
        onClickItem(e) {
            console.log(e);
            this.current = e.currentIndex
        },
        add() {
            this.dynamicLists.push({
                label: '域名',
                rules: [{
                    'required': true,
                    errorMessage: '域名项必填'
                }],
                id: Date.now()
            })
        },
        del(id) {
            let index = this.dynamicLists.findIndex(v => v.id === id)
            this.dynamicLists.splice(index, 1)
        },
        onchange(e) {
            // console.log('onchange:', e);
            let a = ''
            e.detail.value.forEach(element => {
                a = a + ' ' + element.text
            });
            // console.log(a);
            this.valiFormData.school = a
        },
        submit(ref) {
            this.$refs[ref].validate().then(res => {
                let user = wx.getStorageSync('user')
                // console.log('---', user);
                let obj = {
                    avater: this.img2 === '' ? this.imgge : this.img2,
                    phone: user.phone,
                    address: this.valiFormData.address,
                    email: this.valiFormData.email,
                    sex: this.valiFormData.sex,
                    nickname: this.valiFormData.nickname,
                    school: this.valiFormData.school,
                    username: this.valiFormData.username,
                }
                uni.request({
                    url: 'http://localhost:3366/gzj/updatexx',
                    data: obj,
                    // header: {
                    //     // 'Content-Type': 'application/x-www-form-urlencoded'
                    //     'Content-Type': 'application/json' //自定义请求头信息
                    // },
                    method: 'POST', //请求方式，必须为大写
                    success: (res) => {

                        console.log(res.data.user);
                        // wx.setStorageSync('token', res.data.token);
                        wx.setStorageSync('user', res.data.user[0]);
                        // // 跳转
                        uni.switchTab({
                            url: '/pages/web/cp/Home'
                        });


                    }
                })

                // uni.showToast({
                //     title: `校验通过`
                // })
            }).catch(err => {
                console.log('err', err);
            })
        },

        // 获取上传状态
        select(e) {
            console.log('选择文件：', e)
            this.img2 = e.tempFilePaths[0]
            console.log(this.img2);

        },

    }
}
</script>
<!-- 

-->
<style lang="scss">
.zc {
    width: 94%;
    height: 790px;
    background-size: 400px 800px;
    margin: 0 auto;
}

.zctitle {
    width: 100%;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 25px;

}



.example {
    padding: 15px;
    background-color: #fff;
}

.segmented-control {
    margin-bottom: 15px;
}

.button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
}

.form-item {
    display: flex;
    align-items: center;
}

.button {
    display: flex;
    align-items: center;
    height: 35px;
    margin-left: 10px;
    background-color: orange;
}
</style>

